﻿<!doctype html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>CmisSync Event Log</title>
        <script type="text/javascript">
          <!-- $jquery -->
        </script>

        <script type="text/javascript">
          $(document).ready(function () {
              $('dl dd:nth-child(-n+10)').css('display', 'block');
              $('.day-entry-content .event-entry:last-child').css('border', 'none');
            
              $('dd a.windows').click(function () {
                  window.external.LinkClicked($(this).attr("href"));
              });

              // Update the Today and Yesterday labels after midnight
              var midnight_interval = setInterval (function(){
                var date = new Date();

                if ((date.getTime() / 1000) >= <!-- $midnight -->) {
                  $("#today").html($("#today").attr("name"));
                  $("#yesterday").html($("#yesterday").attr("name"));

                  clearInterval(midnight_interval);
                }
              }, 60 * 1000);

              $('.buddy-icon').each (function () {
                if ($(this).css('backgroundImage').indexOf ('@') != -1) {
                  $(this).css ('backgroundColor', '#fff');
                }
              });

              // Hide the 'Show all' link when there are less than 10 events
              $('.show').each (function () {
                var entries = $(this).parent ().find ('dl').children ().length;

                if (entries <= 10) {
                  $(this).hide ();
                } else {
                  // Append the number of entries
                  $(this).html ('Show all ' + entries);
                }
              });

              // When 'Show all' is clicked, show all collapsed events
              $('.show').click(function () {
                 $(this).parent ().find ('dl').children ().show ();
                 $(this).hide ();
              });
          });
        </script>

        <style>
            * {
                box-sizing: border-box;
                -webkit-box-sizing: border-box;
            }

            body {
                background-color: #fff;
                color: <!-- $body-color -->;
                font-size: <!-- $body-font-size -->;
                font-family: <!-- $body-font-family -->;
                margin: 0;
                -webkit-user-select: none;
            }

            small {
                font-size: <!-- $small-font-size -->;
                color: <!-- $secondary-font-color -->;
            }

            .moved-arrow {
                color: <!-- $secondary-font-color -->;
            }

            .day-entry-header {
                color: #aaa;
                margin-left: auto;
                margin-right: auto;
                display: block;
                text-align: center;
                padding-top: 24px;
                font-weight: bold;
            }
                        
            a {
                color:           <!-- $a-color -->;
                text-decoration: none;
                outline: 0;
            }

            a:hover {
                color: <!-- $a-hover-color -->;
                text-decoration: underline;
            }

            .event-timestamp {
                float: left;
                font-size: 80%;
                color: <!-- $secondary-font-color -->;
            }

            .event-user-name {
                float: left;
                font-weight: bold;
            }


            .event-folder {
                float: right;
                color: <!-- $secondary-font-color -->;
                position: relative;
                cursor: pointer;
            }

            .event-folder span {
              display: none
            }

            .event-folder:hover span {
                display: block;
                position: absolute;
                top: 20px;
                right: 0;
                background-color: rgba(20, 20, 20, 0.8);
                color: #fafafa;
                padding: 7px 12px;
                border-radius: 5px;
                font-family: sans-serif;
                font-size: <!-- $small-font-size -->;
                float: right;
            }

            .event-entry {
                padding-top: 24px;
                padding-bottom: 14px;
                border-bottom: 1px #ddd solid;
                padding-left: 96px;
                padding-right: 32px;
                background-repeat: no-repeat;
                background-position: 36px 24px;
                display: block;
            }

            .action {
                font-size: 80%;
                margin-left: 15px;
                float: right;
                margin-bottom: 9px;
                color: <!-- $a-color -->;
            }

            .action:hover {
                color: <!-- $a-hover-color -->;
                cursor: pointer;
            }

            .clearer {
                clear: both;
                backround-color: blue;
                margin: 0;
                padding: 0;
                height: 0;
            }

            .separator {
                clear: both;
                border-bottom: 1px #ccc solid;
                margin-top: 24px;
                margin-bottom: 24px;
            }

            dl {
                padding : 0;
                margin:  0;
                margin-bottom: 12px;
                padding-top: 6px;
                clear: both;
                table-layout: fixed;
            }
            
            dd {
                display: none;
                overflow: hidden;
                text-overflow: ellipsis;
                width: 90%;
                padding: 0;
                padding-bottom: 1px;
                padding-left: 20px;
                margin: 0;
                margin-bottom: 4px;
                background-repeat: no-repeat;
                background-position: center left;
            }

            .document {
                text-overflow: ellipsis;
                width: 100%;
                white-space: nowrap;
            }

            .added {
                background-image: url('<!-- $document-added-background-image -->');
            }

            .deleted {
                background-image: url('<!-- $document-deleted-background-image -->');
            }

            .edited {
                background-image: url('<!-- $document-edited-background-image -->');
            }

            .moved {
                background-image: url('<!-- $document-moved-background-image -->');
            }

            .no-buddy-icon {
                position: relative;
                top: 0;
                left: 0;
                float: left;
                margin-right: 12px;
                width: 48px;
                background-image: url('<!-- $no-buddy-icon-background-image -->');
                background-repeat: no-repeat;
                background-position: top center; 
            }

            .buddy-icon {
                width: 48px;
                height: 48px;
            }
        </style>
    </head>
    <body oncontextmenu="return false;">
        <!-- $event-log-content -->
    </body>
</html>
